<template>
    <div class="clock-input">
        <n-input-number style="width:80%;" :min="1" v-model:value="clkValue" :placeholder="'please input '+field.FieldName" :show-button="false" @update:value="updateClkValue" />
        <n-select style="width:20%;" v-model:value="clkUnit" placeholder="Select" :options="clkOpts" @update:value="updateClkValue" />
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import { NInputNumber, NSelect } from 'naive-ui';
import { device } from '../../../wailsjs/go/models';

const modelValue = defineModel<number|undefined>({
    default: 1
})

const clkValue = ref(1)
const clkUnit = ref(1)

const clkOpts = ref([
    {
        label: 'MHz',
        value: 1000000
    },
    {
        label: 'KHz',
        value: 1000
    },
    {
        label: 'Hz',
        value: 1
    },
])

const props = defineProps({
    field: {
        type: device.DevFrontendConfig,
        default: {}
    }
})

const updateClkValue = (v:any)=>{
    if (v == null) {
        modelValue.value = undefined
    } else {
        modelValue.value = clkValue.value * clkUnit.value
    }
}

onMounted(()=>{
    if (!modelValue.value) return;
    if (modelValue.value > 1000000) {
        clkUnit.value = 1000000
    } else if(modelValue.value > 1000){
        clkUnit.value = 1000
    } else {
        clkUnit.value = 1
    }
    clkValue.value = modelValue.value / clkUnit.value
})


</script>
<style lang="scss" scoped>
.clock-input {
    width: 100%;
    display: flex;
    flex-flow: row;
}
</style>